<template>
  <a-table :columns="columns" :dataSource="tableData">
  </a-table>
</template>
<script>
export default {
  data () {
    // this.cacheData = data.map(item => ({ ...item }))
    return {
      tableData: [{username: '', name: ''}],
      columns: [{
          title: 'username',
          key: 'username',
          dataIndex: 'username',
          width: '25%',
          scopedSlots: { customRender: 'username' },
        }, {
          title: 'name',
          key: 'name',
          dataIndex: 'name',
          width: '15%',
          scopedSlots: { customRender: 'name' },
        }, {
          title: 'operation',
          key: 'operation',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        }]
    }
  },
  created() {
    this.$http
      .get("user")
      .then(response => {
        console.log(response.data);
        if (response.data.code === 0) {
          this.tableData = response.data.returnObject;
          this.tableData.map(item => item.key = item.id)
        }
      })
      .catch(error => {
        console.log(error);
      });

    this.$http
      .get("storeList")
      .then(response => {
        console.log(response.data);
        if (response.data.code === 0) {
          this.storeList = response.data.returnObject;
        }
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
